<template>
  <div>
    <el-card class="artical-show-container">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column
          label="序号"
          width="100"
          type="index"
          :index="
            (index) => {
              return index + 1;
            }
          "
        >
        </el-table-column>

        <el-table-column prop="title" label="职位名称" width="190">
        </el-table-column>
        <el-table-column prop="description" label="描述" width="550">
        </el-table-column>
        <el-table-column prop="person" label="申请人" width="150">
        </el-table-column>
        <el-table-column prop="created_time" label="申请时间" width="500">
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >处理</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog title="审批详情" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="职位标题：">
          <span>{{ form.title }}</span>
        </el-form-item>
        <el-form-item label="职位简介：">
          <span>{{ form.description }}</span>
        </el-form-item>
        <el-form-item label="职位内容：">
          <div v-html="form.content"></div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handle(0)" type="danger">拒 绝</el-button>
        <el-button type="success" @click="handle(1)">通 过</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          title: "顺丰快递员",
          description: "在市区配送快递",
          person: "普通用户1",
          created_time: "2024-2-28",
        },
         {
          title: "web前端程序员",
          description: "负责对产品web端和移动端页面功能的开发、优化和维护",
          person: "普通用户2",
          created_time: "2024-2-28",
        },
      ],
      form: {},
      dialogFormVisible: false,
    };
  },
  mounted() {
    this.$http.get(`/articles?apply_recommend=1`).then((res) => {
      // this.tableData = res.result;
    });
  },
  methods: {
    handleClick(row) {
      this.dialogFormVisible = true;
      this.form = row;
    },
    handle(val) {
      let id = this.form.id;
      let newArticle = {
        title: this.form.title,
        cover_picture: this.form.coverPicture,
        description: this.form.description,
        content: this.form.content,
        category_id: this.form.categoryId,
        is_recommend: val,
        apply_recommend: 0,
      };
      //给提示框后确认更新职位
      this.$http.put(`/articles/?id=${id}`, newArticle).then((res) => {
        if (res.code == 0) {
          this.$message({
            type: "success",
            message: "处理成功!",
          });
          this.dialogFormVisible = false;
          this.$http.get(`/articles?apply_recommend=1`).then((res) => {
            this.tableData = res.result;
          });
        } else {
          this.$message({
            type: "warning",
            message: "处理失败!",
          });
        }
      });
    },
    refuse() {},
  },
};
</script>
<style lang="scss" scoped></style>
